<template>
	<view></view>
</template>

<script>
	import * as echarts from 'echarts'
	import adidJson from '@/utils/cascadeData.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		countCorrectPersonLocation
	} from '@/common/api/approve/home/home_api.js'
	export default {
		data() {
			return {
				myChart: null,
				adidJson: adidJson,
				myadidJson: {},
				xAxisData: [
					'南昌县',
					'进贤县',
					'安义县',
					'东湖区',
					'西湖区',
					'青云谱区',
					'青山湖区',
					'新建区',
					'红谷滩区',
					'经开区',
					'高新区',
					'湾里管理局'
				],
				data: [2, 4, 0, 4, 2, 2, 3, 4, 3, 3, 3, 0]
			}
		},
		computed: {
			...mapGetters(['APPROVE_DEPT', 'getParentid'])
		},
		mounted() {
			this.myadidJson = this.adidJson.cascadeData.city
				.filter(item => item.value === '360000')[0]
				.children.filter(el => el.value === '360100')[0].children
			this.initEchartData()
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.dispose()
			}
		},
		methods: {
			async initEchartData() {
				const res = await countCorrectPersonLocation(this.getParentid)
				if (res.code === 0) {
					// console.log(res.data, '查询数据成功')
					if (res.data) {
						const xAxis = res.data.columnList
						// 进行转换和匹配
						const data = res.data.valueList
						const xAxisData = []
						// console.log(this.myadidJson, '省事件')
						if (xAxis && this.myadidJson.length > 0) {
							xAxis.forEach(el => {
								if (this.myadidJson.some(item => item.value === el)) {
									xAxisData.push(
										this.myadidJson.filter(item => item.value === el)[0].name
									)
								}
							})
						}
						this.initChart(xAxisData, data)
					}
				} else {
					this.$message.error('查询数据异常')
				}
			},
			initChart(xAxis, data) {
				// this.myChart = echarts.init(document.getElementById('mychartAre'));
				var proDom = document.getElementById('areaEcharts')
				if (proDom) {
					this.chart = echarts.init(areaEcharts)
					// 配置图表选项并设置到图表实例上
				} else {
					console.error('图表容器不存在，无法初始化ECharts')
					return
				}
				this.chart.setOption({
					grid: {
						left: '15%', // 设置距离左侧的距离为容器宽度的5%
						// 其他配置...
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					xAxis: {
						type: 'category',
						data: xAxis,
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n') //垂直显示
							}
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						type: 'bar',
						barWidth: '45%',
						data: data,
						itemStyle: {
							normal: {
								color: function(params) {
									// var colorList = ['#00FFF4', '#00A1FF']
									var colorList = [
										new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
												offset: 1,
												color: '#264AA2'
											}, // css动画@keyframes的写法
											{
												offset: 0,
												color: '#3496FB'
											}
										])
									]
									var index = params.dataIndex % colorList.length
									return colorList[index]
								}
							}
						}
					}]
				})
			}
		}
	}
</script>

<style scoped></style>